{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% load  sizeformat %}

{% block title %}{% translate '挂载云硬盘' %}{% endblock %}

{% block boby %}
    <div class="container-fluid col-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title"><strong>{% translate '挂载云硬盘' %}</strong></span>
                <div class="float-right">
                    <a class="btn btn-sm btn-success" href="{% url 'vdisk:vdisk-create' %}">{% translate '创建云硬盘' %}</a>
                    <a class="btn btn-sm btn-info" href="{% url 'vdisk:vdisk-list' %}">{% translate '云硬盘列表' %}</a>
                </div>
            </div>
            <div class="card-body">
                <div class="">
                    <div class="text-primary h4">{% translate '云硬盘信息' %}:</div>
                    <div class="">
                        <dl class="row">
                            <dt class="col-2 text-right">{% translate '云硬盘' %}UUID:</dt> <dd class="col-10" id="id-mount-disk-uuid">{{ disk.uuid }}</dd>
                            <dt class="col-2 text-right">{% translate '云硬盘容量' %}:</dt> <dd class="col-10">{{ disk.size|sizeformat:"GB" }}</dd>
                            <dt class="col-2 text-right">{% translate '创建时间' %}:</dt> <dd class="col-10">{{ disk.create_time }}</dd>
                            <dt class="col-2 text-right">{% translate '存储池' %}:</dt> <dd class="col-10">{{ disk.quota }}</dd>
                            <dt class="col-2 text-right">{% translate '机组' %}:</dt> <dd class="col-10">{{ disk.quota.group }}</dd>
                            <dt class="col-2 text-right">{% translate '用户' %}:</dt> <dd class="col-10">{{ disk.user }}</dd>
                            <dt class="col-2 text-right">{% translate '备注' %}:</dt> <dd class="col-10">{{ disk.remarks }}</dd>
                        </dl>
                    </div>
                </div>
                <hr style=" height:1px;border:1px;border-top:1px solid #185598;"/>
                {% if disk.vm %}
                    <div>
                        <p class="text-warning h3">{% translate '此硬盘不能挂载，硬盘已被挂载使用，挂载虚拟机uuid' %}: {{ disk.vm.hex_uuid }}，IP: <a href="{% url 'vms:vm-detail' vm_uuid=disk.vm.uuid %}">{{ disk.vm.ipv4 }}</a></p>
                    </div>
                {% else %}
                    <div>
                        <div class="text-success h4 col-sm-4">{% translate '可供挂载的虚拟机' %}：</div>
                        <div class="float-right col-sm-8">
                            <form role="form" class="form-horizontal" method="get" action="">
                                <div class="input-group" style="">
                                    <div class="input-group-prepend">
                                        <label class="input-group-text" for="id-center">{% translate '关键字' %}</label>
                                    </div>
                                    <input type="text" class="form-control" name="search" value="{{ search }}"
                                           placeholder="{% translate '搜 UUID、IP地址、备注' %}"/>
                                    <span class="input-group-prepend"></span>
                                    <button type="submit" class="btn btn-primary form-control">{% translate '筛选' %}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <table class="table table-bordered table-vm-list" style="word-wrap:break-word;word-break:break-all;">
                        <tr>
                            <th></th>
                            <th>{% translate 'IP地址' %}</th>
                            <th>{% translate '创建者' %}</th>
                            <th>{% translate '镜像' %}</th>
                            <th>CPU/MEM</th>
        {#                    <th>云硬盘</th>#}
                            <th>{% translate '备注' %}</th>
                            <th>{% translate '状态' %}<button class="btn btn-sm btn-outline-success btn-update-vm-status"><i class="fa fa-sync"></i></button></th>
                            <th>{% translate '操作' %}</th>
                        </tr>
                        {% for vm in vms %}
                            <tr id="tr_{{ vm.hex_uuid }}">
                                <td><input type="checkbox" class="item-checkbox" value="{{ vm.hex_uuid }}" name="select_vm"></td>
                                <td title="{{ vm.hex_uuid }}"><b>{{ vm.mac_ip.ipv4 }}</b></td>
                                <td>{{ vm.user }}</td>
                                <td>{{ vm.image_name }}</td>
                                <td>
                                    {{ vm.vcpu }} / {{ vm.mem|sizeformat:'GB' }}
                                </td>
        {#                        <td>#}
        {#                            {% if vm.vdisks %}#}
        {#                                {% for v in vm.vdisks %}#}
        {#                                    {{ v.dev }}({{ v.size|sizeformat:'GB' }})<br>#}
        {#                                {% endfor %}#}
        {#                            {% else %}#}
        {#                                    无#}
        {#                            {% endif %}#}
        {#                        </td>#}
                                <td>
                                    <span>{{ vm.remarks|default_if_none:'' }}</span>
                                </td>
                                <td><span id="vm_status_{{ vm.hex_uuid }}"></span></td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-success btn-disk-mount" data-vm-uuid="{{ vm.hex_uuid }}">{% translate '挂载' %}</button>
                                    <button type="button" class="btn btn-sm btn-warning btn-vm-shutdown" data-vm-uuid="{{ vm.hex_uuid }}">{% translate '关机' %}</button>
                                    <button type="button" class="btn btn-sm btn-warning btn-vm-poweroff" data-vm-uuid="{{ vm.hex_uuid }}">{% translate '强制断电' %}</button>
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                    {% with page_list=page_nav.page_list previous=page_nav.previous next=page_nav.next %}
                        {% if page_list %}
                            <div class="card-footer">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination"  style="margin:0;">
                                        {% if previous %}
                                            <li class="page-item"><a class="page-link" href="?{{ previous }}" aria-label="Previous"><span
                                                    aria-hidden="true">&laquo;</span></a></li>
                                        {% else %}
                                            <li class="page-item disable"><span class="page-link" aria-hidden="true">&laquo;</span></li>
                                        {% endif %}

                                        {% for disp, query, active in page_list %}
                                            {% if active %}
                                                <li class="page-item active"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                            {% else %}
                                                <li class="page-item"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                            {% endif %}
                                        {% endfor %}

                                        {% if next %}
                                            <li class="page-item"><a class="page-link" href="?{{ next }}" aria-label="Next"><span
                                                    aria-hidden="true">&raquo;</span></a></li>
                                        {% else %}
                                            <li class="page-item disable"><span class="page-link" aria-hidden="true">&raquo;</span></li>
                                        {% endif %}
                                    </ul>
                                </nav>
                            </div>
                        {% endif %}
                    {% endwith %}
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'evcloud/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'vms/vms_operations.js' %}"></script>
    <script type="text/javascript" src="{% static 'vdisk/vdisk_mount_to_vm.js' %}"></script>
{% endblock %}

